import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Accordion

A vertically stacked set of interactive headings that reveal associated content sections when clicked. Each section can be expanded or collapsed independently.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.accordion/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='accordion' query={{}} height={700}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart copy
        Column(
          children: [
            FAccordion(
              controller: FAccordionController(),
              children: [
                FAccordionItem(
                  title: const Text('Production Information'),
                  child: Text('''
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.
'''),
),
FAccordionItem(
initiallyExpanded: true,
title: const Text('Shipping Details'),
child: Text('''
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.

All orders are carefully packaged and fully insured. Track your shipment in real-time through our dedicated tracking portal.
'''),
),
FAccordionItem(
title: const Text('Return Policy'),
child: Text('''
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.

Our hassle-free return process includes free return shipping and full refunds processed within 48 hours of receiving the returned item.
'''),
),
],
),
],
);

````
</Tabs.Tab>

</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create accordion
````

## Usage

### `FAccordion(...)`

```dart copy
FAccordion(
  controller: FAccordionController(min: 1, max: 2),
  style: FAccordionStyle(...),
  children: [
    FAccordionItem(
      title: const Text('Is it accessible?'),
      child: const Text('Yes. It follows WAI-ARIA design patterns.'),
    ),
  ],
);
```

### With Max Number of Expanded Items

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='accordion' query={{max: 2}} height={600}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart {5} copy
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FAccordion(
              controller: FAccordionController(),
              children: [
                FAccordionItem(
                  title: const Text('Is it accessible?'),
                  child: const Text('Yes. It follows WAI-ARIA design patterns.'),
                ),
                FAccordionItem(
                  initiallyExpanded: true,
                  title: const Text('Is it Styled?'),
                  child: const Text('Yes. It includes default styles matching other components.'),
                ),
                FAccordionItem(
                  title: const Text('Is it Animated?'),
                  child: const Text('Yes. Animations are enabled by default but can be disabled.'),
                ),
              ],
            ),
          ],
        );
        ```
    </Tabs.Tab>
</Tabs>
